import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { DescItemDto } from '@/components/render-descriotion/Index'
import RenderDescription from '@/components/render-descriotion/Index'
import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons-vue'
import { getCompanyDetail } from '@/api/company'
import type { CompanyDetailDto } from '@/api/company/types'
import PreviewImage from '@/components/preview-media/PreviewImage'
import { CompanyAuditStatusCnEnum, ProductTypeCnEnum } from '@/const/enum'
import ToolTipText from '@/components/tooltip-text/Index'
@Component
export class BasicInfo extends Render {
    @Prop() companyId!: number

    basicData = {} as CompanyDetailDto

    get clientInfoData() {
        return [
            {
                label: '客户名称',
                value: this.basicData.companyName
            },
            {
                label: '法人',
                value: this.basicData.legalPerson,
            },
            {
                label: '默认收款渠道',
                value: this.basicData.channelName,
            },
            {
                label: '客户简称',
                value: this.basicData.companyAbbreviation
            },
            {
                label: '开通业务',
                value: this.basicData.openProduct?.map(i => ProductTypeCnEnum[i]).join(',')
            },
            {
                label: '默认收款账户',
                value: this.basicData.bankName
            },
            {
                label: '营业执照编号',
                value: this.basicData.creditCode
            },
            {
                label: '营业执照',
                value: this.basicData.creditCodePicture ? <PreviewImage src={this.basicData.creditCodePicture} text="查看" /> : <></>
            },
            {
                label: '所在区域',
                value: this.basicData.area
            },
            {
                label: '证件地址',
                value: this.basicData.businessLicenseAddress
            },
        ] as DescItemDto[]
    }

    get systemInfoData() {
        return [
            {
                label: '客户Id',
                value: this.basicData.customerNo
            },
            {
                label: '账户状态',
                value: CompanyAuditStatusCnEnum[this.basicData.auditStatus],
            },
            {
                label: '建档时间',
                value: this.basicData.createTime,
            },
            {
                label: '创建人',
                value: <ToolTipText text={this.basicData.supAdminName as string} content={this.basicData.supAdminPhone as string}></ToolTipText>
            },
            {
                label: '开户时间',
                value: this.basicData.openAnAccountTime
            },
        ] as DescItemDto[]
    }

    async getData() {
        const res = await getCompanyDetail({
            companyId: this.companyId
        })
        this.basicData = res
    }

    onMounted() {
        this.getData()
    }

    render() {
        return <div>
            <div class="flex items-center mb-20px">
                <UserOutlined />
                <div class="text-black-200 font-bold ml-8px">客户资料</div>
            </div>
            <RenderDescription renderData={this.clientInfoData} />
            <div class="flex items-center mb-20px mt-40px">
                <InfoCircleOutlined />
                <div class="text-black-200 font-bold ml-8px">系统信息</div>
            </div>
            <RenderDescription renderData={this.systemInfoData} />
        </div>
    }
}

export default toNative<{companyId: number}, {}>(BasicInfo)